import { Avatar } from '@arco-design/web-react';
import { IconUser } from '@arco-design/web-react/icon';
import { useMemo } from 'react';
import { PermissionType, UserInfo } from "../../../../types/conversation";
import './index.css';

interface UserListItemProps {
  data: UserInfo;
  isSelect?: boolean;
  handleChangeUser: (user: UserInfo) => void;
}

export const UserListItem: React.FC<UserListItemProps> = (props) => {
  const { data, isSelect, handleChangeUser } = props;
  const { username } = data;

  const identity = useMemo(() => {
    switch (data.permission) {
      case PermissionType.manager:
        return '管理者';
      case PermissionType.staff:
        return '客服';
      case PermissionType.customer:
      default:
        return '普通用户';
    }
  }, [data]);

  return (<div className="conversation-item" style={{ backgroundColor: isSelect ? '#f3f6fe' : '' }} onClick={() => handleChangeUser(data)}>
    <Avatar style={{ backgroundColor: '#3370ff' }}>
      <IconUser />
    </Avatar>
    <div className='conversation-item-content'>
      <div className='conversation-item-user-info'>
        <div className='name'>{username}</div>
        <div className='update-time'>
          {/* {dayjs(created_at).format('HH:mm')} */}
          {identity}
        </div>
      </div>
    </div>
  </div>)
}